* {
  margin: 0;
  padding: 0;
}

.box {
  .top {
    .tit {
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
      align-items: center;

      .tit-left {
        img {
          width: 120px;
          height: 50px;
        }
      }

      .tit-right {
        display: flex;
        align-items: center;

        img {
          width: 35px;
          height: 35px;
        }

        div {
          color: #445d78;
          margin-left: 10px;
        }
      }
    }

    // 导航条
    .nav {
      z-index: 999;
      position: relative;

      .nav1 {
        width: 80%;
        height: 50px;
        margin: auto;
        line-height: 20px;
        text-align: center;
        transform: skewX(-20deg);
        color: #fff;
        border-radius: 2px;
        background-color: #202f32;
        display: flex;

        .nav1-1 {
          width: 20%;
          line-height: 50px;

          &:hover {
            background-color: #415b76;
            transform: scale(1.2);
            transform: translate(0, -1px);
          }

          a {
            color: #fff;
            text-decoration: none;
          }
        }
      }
    }

    // 轮播图
    .swiper {
      height: 600px;
      width: 100%;
      margin-top: -50px;
    }
  }

  // 内容
  .content {
    margin-top: 30px;

    // 优质服务
    .serve {
      text-align: center;

      .title1 {
        font-size: 20px;
      }

      .title2 {
        font-size: 15px;
        margin: 15px 0;
      }

      .line {
        width: 80%;
        margin: auto;
        margin-top: 30px;

        .line1 {
          border: 1px solid #cad6e6;
        }

        .line2 {
          width: 10%;
          margin: auto;
          margin-top: -3px;
          border: 2px solid #6ba3e7;
        }
      }

      .img {
        margin-top: 20px;
        width: 100%;

        img {
          width: 100%;
        }
      }
    }

    // 解决方案
    .scheme {
      text-align: center;
      margin-top: 50px;

      .title1 {
        margin-top: 15px;
        font-size: 20px;
      }

      .title2 {
        font-size: 15px;
        margin: 15px 0;
      }

      .line {
        width: 80%;
        margin: auto;
        margin-top: 30px;

        .line1 {
          border: 1px solid #cad6e6;
        }

        .line2 {
          width: 10%;
          margin: auto;
          margin-top: -3px;
          border: 2px solid #6ba3e7;
        }
      }

      .card {
        width: 80%;
        margin: auto;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .card-item {
          width: 32%;
          // 平滑过渡效果
          transform: transform 0.3s ease;
          // 初始缩放比例
          transform: scale(1);

          &:hover {
            // 鼠标经过时的缩放比例
            transform: scale(1.02);
            box-shadow: 0 0 5px #888;
          }

          .card-item1 {
            width: 90%;
            margin: auto;
            margin-top: 15px;

            .img {
              width: 100%;

              img {
                width: 100%;
                border-radius: 10px;
              }
            }

            .text1 {
              margin: 10px 0;
              font-size: 20px;
            }

            .text2 {
              font-size: 17px;
              text-align: left;
              line-height: 30px;
              margin: 0 10px;
              color: #666666;
            }
          }
        }
      }
    }

    // 经典案例
    .case {
      text-align: center;
      margin-top: 50px;

      .title1 {
        margin-top: 15px;
        font-size: 20px;
      }

      .title2 {
        font-size: 15px;
        margin: 15px 0;
      }

      .more {
        text-align: right;
        width: 90%;
        margin: auto;
        color: silver;
        margin: 5px 0;
      }

      .line {
        width: 80%;
        margin: auto;

        .line1 {
          border: 1px solid #cad6e6;
        }

        .line2 {
          width: 10%;
          margin: auto;
          margin-top: -3px;
          border: 2px solid #6ba3e7;
        }
      }

      .an-box {
        width: 80%;
        margin: auto;
        margin-top: 25px;

        .an-box1 {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .an-item {
            width: 23%;
            transform: transform 0.3s ease;
            transform: scale(1);

            &:hover {
              transform: scale(1.07);
              box-shadow: 0 0 5px #888;

              .an-item-text {
                display: block;
              }
            }

            .an-item_img {
              width: 100%;
              height: 170px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .an-item-text {
              width: 100%;
              height: 170px;
              align-items: center;
              display: none;
              position: absolute;
              top: 0;
              z-index: 999;
              background-color: rgba(40, 61, 84, 0.8);
              color: white;

              .an-t {
                width: 100%;
                padding-top: 60px;
                text-align: center;
              }
            }
          }
        }
      }
    }

    // 开发流程
    .kflc {
      margin-top: 30px;

      .kf {
        text-align: center;
        font-size: 20px;
      }

      .container {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .tabs {
        display: flex;
        list-style-type: none;
        padding: 0;
      }

      .tab {
        padding: 5px 10px;
        cursor: pointer;
        background-color: white;
        border: 1px solid white;
        margin-right: 25px;
        text-align: center;
        box-shadow: 0px 0px 5px #888888;

        img {
          width: 20px;
          height: 20px;
          text-align: center;
        }
      }

      .tab.active {
        background-color: white;
      }

      .co-li {
        width: 80%;
        margin: 20px 0;
        border: 2px solid #468ce2;
      }

      .content {
        display: none;
        width: 80%;
        text-align: center;
        padding: 20px;
        border: 1px solid #ccc;
        margin-top: 10px;

        .c-box {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .co-left {
            width: 48%;

            div:nth-child(1) {
              width: 100%;
              font-size: 18px;
              margin: 10px 0;
            }

            div:nth-child(2) {
              width: 90%;
              margin: auto;
              text-align: left;
            }
          }

          .co-right {
            width: 50%;

            img {
              width: 100%;
              height: 200px;
              border-radius: 10px;
            }
          }
        }
      }

      .content.active {
        display: block;
      }
    }

    // 合作共赢
    .cooperate {
      text-align: center;
      margin-top: 50px;

      .title1 {
        margin-top: 15px;
        font-size: 20px;
      }

      .title2 {
        font-size: 15px;
        margin: 15px 0;
      }

      .line {
        width: 80%;
        margin: auto;
        margin-top: 30px;

        .line1 {
          border: 1px solid #cad6e6;
        }

        .line2 {
          width: 10%;
          margin: auto;
          margin-top: -3px;
          border: 2px solid #6ba3e7;
        }
      }

      .coop-box {
        width: 80%;
        margin: auto;
        margin-top: 30px;

        .coop-top {
          display: flex;
          justify-content: space-between;

          .coop-item {
            border: 1px solid silver;
            width: 18%;
            border-radius: 10px;

            img {
              width: 100%;
              border-radius: 10px;
            }
          }

          .coop-item:hover {
            border: 1px solid #405c76;
          }
        }

        .coop-bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;

          .coop-item {
            border: 1px solid silver;
            width: 18%;
            border-radius: 10px;

            img {
              width: 100%;
              border-radius: 10px;
            }
          }

          .coop-item:hover {
            border: 1px solid #405c76;
          }
        }
      }
    }
  }

  // 底部
  .foot {
    margin-top: 30px;

    .foot-box {
      .foot-box-top {
        background-color: #415b76;
        padding: 20px 0;

        .foot-box-top1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 80%;
          margin: auto;

          .foot-left {
            .left-item {
              color: #fff;
              line-height: 40px;
            }
          }

          .foot-right {
            .img {
              width: 100%;

              img {
                width: 100%;
              }
            }

            .text {
              text-align: center;
              color: #fff;
              margin-top: 10px;
            }
          }
        }
      }

      .foot-box-bottom {
        border-top: 1px solid #fff;
        background-color: #243d56;
        text-align: center;

        .text {
          color: #fff;
          padding: 10px 0;
        }
      }
    }
  }
}